import React, { useEffect, useState } from 'react';
import './Workbench.scss'
import * as service from '../../../../api/index';
import * as echarts from 'echarts';
import * as zzservice from '../../../../api/indexzz';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import type { Dayjs } from 'dayjs';
import dayLocaleData from 'dayjs/plugin/localeData';
import { Calendar, Col, Radio, Row, Select, Typography, theme } from 'antd';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
import { Outlet,useNavigate } from 'react-router-dom';

dayjs.extend(dayLocaleData);




interface Props {

}
function Workbench(props: Props) {
  let navigate=useNavigate()
    var myChart:any = null;
    const [data, setData] = useState([])
    const [lu, setLu] = useState(
      [
        {
          "id": 1,
          "name": "车辆",
          "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u984.png",
          "route": "/index/Vehicle"
        },
        {
          "id": 2,
          "name": "新闻",
          "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u987.png",
          "route": "/index/Newsmanage"
        },
        {
          "id": 3,
          "name": "员工",
          "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u960.png",
          "route": "/index/staff"
        },
        {
          "id": 4,
          "name": "资产",
          "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u999.png",
          "route": "/index/assets"
        },
        {
          "id": 5,
          "name": "薪酬",
          "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u966.png",
          "route": "/index/moneys"
        },
        {
          "id": 6,
          "name": "会议室预定",
          "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u981.png",
          "route": "/index/conference"
        },
        {
          "id": 7,
          "name": "绩效",
          "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u972.png",
          "route": "/index/achievements"
        },
        {
          "id": 8,
          "name": "审批",
          "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u978.png",
          "route": "/index/Approval"
        },
        {
          "id": 9,
          "name": "考勤",
          "pic": "https://cdn7.axureshop.com/demo/2004033/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u963.png",
          "route": "/index/checknav"
        }
      ]
    );
    var fa = async () => {
      // 员工概况
      // var res = await service.user_Employee()
      var res = await zzservice.user_people()
      setData(res.data.data)

      // 快捷入口导航
      // var res1 = await service.user_hang()
      // setLu(res1.data)
   


    }
    useEffect(() => {
        fa()
        myChart = echarts.init(document.getElementById('hh1')||document.body )
        draw()
    }, [])

    var draw = ()=>{
          myChart.setOption({
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: 1048, name: '审批中' },
                  { value: 735, name: '审批通过' },
                  { value: 580, name: '审批拒绝' },
                  { value: 484, name: '审批撤销' },
                  { value: 300, name: '未提交' }
                ]
              }
            ]
          })
         
    }
  

    const { token } = theme.useToken();

    const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
      console.log(value.format('YYYY-MM-DD'), mode);
    };
  
    const wrapperStyle = {
      width: 300,
      border: `1px solid ${token.colorBorderSecondary}`,
      borderRadius: token.borderRadiusLG,
    };
  
    var tiaozhuan=(item:any)=>{
      navigate(item.route)
       }
    return (
        <div className='workbench'>
            <div className="h1" >
                <span>👏</span>
                <span> 早上好，Daisy！</span>
            </div>
            <div className="h2">
                <div className="p1">员工概况</div>
                <div className="p2">
                    {
                        data.map((item: any, index) => {
                            return (
                                <div className="yuan" key={index} onClick={()=>{navigate('/index/staff/roster')}} style={{cursor:'pointer'}}>
                                    <div className="z1"><img src={item.pic} alt="" /></div>
                                    <div className="z2">{item.shu}</div>
                                    <div className="z3">{item.name}</div>


                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <div className="h3">
                <div className="sh">
                    <div>快捷入口</div>
                    <div className='kuai'>
                        {

                            lu.map((item: any, index) => {
                                return (
                                    <div key={index} className='item' onClick={()=>{tiaozhuan(item)}} style={{cursor:'pointer'}}>
                                        <img src={item.pic} alt="" />
                                        <div>{item.name}</div>
                                    </div>
                                )
                            })

                        }
                    </div>
                </div>
                <div className="sh1">
                <div style={wrapperStyle}>
      <Calendar
        fullscreen={false}
        headerRender={({ value, type, onChange, onTypeChange }) => {
          const start = 0;
          const end = 12;
          const monthOptions = [];

          let current = value.clone();
          const localeData = value.localeData();
          const months = [];
          for (let i = 0; i < 12; i++) {
            current = current.month(i);
            months.push(localeData.monthsShort(current));
          }

          for (let i = start; i < end; i++) {
            monthOptions.push(
              <Select.Option key={i} value={i} className="month-item">
                {months[i]}
              </Select.Option>,
            );
          }

          const year = value.year();
          const month = value.month();
          const options = [];
          for (let i = year - 10; i < year + 10; i += 1) {
            options.push(
              <Select.Option key={i} value={i} className="year-item">
                {i}
              </Select.Option>,
            );
          }
          return (
            <div style={{ padding: 8 }}>
              <Typography.Title level={4}>日程待办</Typography.Title>
              <Row gutter={8}>
                <Col>
                  <Radio.Group
                    size="small"
                    onChange={(e) => onTypeChange(e.target.value)}
                    value={type}
                  >
                    <Radio.Button value="month">Month</Radio.Button>
                    <Radio.Button value="year">Year</Radio.Button>
                  </Radio.Group>
                </Col>
                <Col>
                  <Select
                    size="small"
                    dropdownMatchSelectWidth={false}
                    className="my-year-select"
                    value={year}
                    onChange={(newYear) => {
                      const now = value.clone().year(newYear);
                      onChange(now);
                    }}
                  >
                    {options}
                  </Select>
                </Col>
                <Col>
                  <Select
                    size="small"
                    dropdownMatchSelectWidth={false}
                    value={month}
                    onChange={(newMonth) => {
                      const now = value.clone().month(newMonth);
                      onChange(now);
                    }}
                  >
                    {monthOptions}
                  </Select>
                </Col>
              </Row>
            </div>
          );
        }}
        onPanelChange={onPanelChange}
      />
    </div>
                </div>
                <div className="sh2">
                    <div>审批概况</div>
                <div id='hh1' style={{width:400,height:300,marginTop:20}}></div> 
                  
                </div>
                </div>
           
        </div>
    );
}

export default Workbench;